<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <title>供销存</title>
  <link rel="icon" href="/icon.png" type="image/x-icon" />
  <!-- Matomo -->
  <script type="text/javascript">
    var _paq = window._paq || [];
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(['enableLinkTracking']);
    _paq.push(['setDocumentTitle', document.title]);
    _paq.push(['trackPageView']);
    (function () {
      var u =
        window.location.host == 'mars.cifi.com.cn'
          ? '//statistics.cifi.com.cn/matomo/'
          : '//statistics-dev.cifi.com.cn/matomo/';
      _paq.push(['setTrackerUrl', u + 'matomo.php']);
      _paq.push(['setSiteId', '47']);
      var d = document,
        g = d.createElement('script'),
        s = d.getElementsByTagName('script')[0];
      g.type = 'text/javascript';
      g.async = true;
      g.defer = true;
      g.src = u + 'matomo.js';
      s.parentNode.insertBefore(g, s);
    })();
  </script>
  <!-- End Matomo Code -->
  <style lang="scss" rel="stylesheet/scss" scoped>
    .sidebar {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 10000;

      &:hover {
        width: 300px;

        .custom-container {
          float: right;
        }

        .service-list {
          width: 203px;
          padding: 20px 23px;
        }
      }

      .custom-container {
        box-sizing: border-box;
        width: 56px;
        height: 60px;
        padding: 10px 12px;
        background: #00A5FF;
        color: white;
        font-size: 0;
        cursor: pointer;
        text-align: center;
        cursor: pointer;

        img {
          display: inline-block;
          width: 20px;
          transition: all 1s;
          vertical-align: top;
        }

        span {
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          font-size: 14px;
          font-weight: 300;
        }
      }

      .service-list {
        position: absolute;
        right: 67px;
        bottom: 0;
        width: 0;
        padding: 0;
        background: white;
        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.14);
        overflow: hidden;
        cursor: pointer;

        .list-item {
          &:nth-child(n+2) {
            margin-top: 25px;
          }

          img {
            display: inline-block;
            width: 22px;
            transform: translateY(-4px)
          }

          .content-container {
            display: inline-block;
            padding-left: 5px;

            .title {
              line-height: 20px;
              font-size: 14px;
              color: #333;
            }

            .desc {
              margin-top: 4px;
              line-height: 17px;
              font-size: 12px;
              color: #999;
            }
          }
        }

      }
    }
  </style>

</head>

<body>
  <noscript>Sorry, we need js to run correctly!</noscript>
  <div id="root"></div>
</body>

</html>